<!--
 * @Author: ZhaoZhiqi
 * @Date: 2024-07-01 18:02:44
 * @LastEditors: ZhaoZhiqi
 * @LastEditTime: 2025-01-22 17:40:08
 * @Description: 我的订单
 * @FilePath: \charging-mini\充电项目\pages\order.vue
-->
<template>
    <div class="container">
        <HeaderBar>
            <template slot="titleBar">
                <img class="title" :src="imgs.orderTitle" alt="" />
            </template>
        </HeaderBar>

        <template v-if="userInfo.phone">
            <Tabs style="flex: auto; overflow: auto" v-model="tabIndex" :list="list">
                <template v-slot:[getSlotName(index)] v-for="(item, index) in list">
                    <div class="list" :class="[`list_${index}`]" :key="index">
                        <template v-if="orderArr[index].length">
                            <!-- 订单 -->
                            <div class="order-item" v-for="(item2, i) in orderArr[index]" :key="i" @click="link(`/pages/order_detail?orderNo=${item2.orderNo}`)">
                                <div class="order-header">
                                    <div class="order-header-left">
                                        <img :src="imgs.stationIcon" alt="" />
                                        {{ item2.stationName }}
                                    </div>
                                    <StatusTag :status="item2.chargingStatus" />
                                </div>
                                <div class="order-item-content">
                                    <div class="order-item-row">
                                        <div class="order-label">订单号：</div>
                                        <div class="order-value">{{ item2.orderNo }}</div>
                                    </div>
                                    <div class="order-item-row">
                                        <div class="order-label">充电开始时间：</div>
                                        <div class="order-value">{{ item2.startTime }}</div>
                                    </div>
                                    <div class="order-item-row">
                                        <div class="order-label">充电结束时间：</div>
                                        <div class="order-value">{{ item2.endTime }}</div>
                                    </div>
                                    <div class="order-item-row">
                                        <div class="order-label">充电口：</div>
                                        <div class="order-value">{{ item2.port }}号口</div>
                                    </div>
                                    <div class="order-item-row">
                                        <div class="order-label">充电时长：</div>
                                        <div class="order-value">
                                            <span>{{ formatChargingTime(item2.chargingTime) }}</span>
                                        </div>
                                    </div>
                                    <div v-if="item2.refundAmount" class="order-item-row">
                                        <div class="order-label">退费金额：</div>
                                        <div class="order-value">{{ item2.refundAmount ? (item2.refundAmount / 100).toFixed(2) : "-" }}元</div>
                                    </div>
                                    <div class="order-item-row">
                                        <div class="order-label">充电方式：</div>
                                        <div class="order-value">{{ item2.scanCharge ? "扫码充电" : "实体卡" }}</div>
                                    </div>
                                </div>
                                <div class="order-footer">
                                    <div class="order-footer-left"></div>
                                    <div class="order-footer-right">
                                        付款金额：<span>{{ item2.payAmount || item2.payAmount === 0 ? (item2.payAmount / 100).toFixed(2) : "-" }}元</span>
                                    </div>
                                </div>
                            </div>

                            <div v-if="hasMoreArr[index]" class="load-more" @click="getOrderList">加载更多</div>
                            <div v-else class="no-more">已加载全部</div>
                        </template>
                        <div v-else class="empty">暂无数据</div>
                    </div>
                </template>
            </Tabs>
        </template>
        <LoginButton v-else reLaunchUrl="/pages/order"></LoginButton>
    </div>
</template>
<script>
import { getOrderListAPI } from "../src/api/api";
import HeaderBar from "../src/components/HeaderBar.vue";
import Tabs from "../src/components/Tabs.vue";
import StatusTag from "../src/components/StatusTag.vue";
import LoginButton from "../src/components/LoginButton.vue";
import { formatChargingTime } from "../src/libs/utils";

const app = getApp();
const orderCateList = ["ALL", "CHARGING", "FINISH", "ABNORMAL"];
export default {
    components: {
        HeaderBar,
        Tabs,
        StatusTag,
        LoginButton,
    },
    data() {
        return {
            imgs: app.globalData.imgs,
            tabIndex: 0,
            show: false,
            list: ["全部", "待结算", "已完成", "异常"],
            loading: false,

            // 页码
            pageArr: [1, 1, 1, 1],

            // 订单数据
            orderArr: [[], [], [], []],

            // 更多数据
            hasMoreArr: [true, true, true, true],

            userInfo: {},
        };
    },
    onShareAppMessage() {},
    onLoad() {
        this.userInfo = uni.getStorageSync("userInfo") || {};
    },
    onShow() {
        console.log("订单页 onShow");
        this.userInfo = uni.getStorageSync("userInfo") || {};
        // 重置数据
        this.pageArr = [1, 1, 1, 1];
        this.orderArr = [[], [], [], []];
        this.hasMoreArr = [true, true, true, true];
        
        if (this.userInfo.phone) {
            this.getOrderList();
        }
    },
    watch: {
        tabIndex(val) {
            this.pageArr[val] = 1;
            this.orderArr[val] = [];
            this.hasMoreArr[val] = true;
            this.getOrderList();
        },
        "userInfo.phone"(val) {
            // 重置数据
            this.pageArr = [1, 1, 1, 1];
            this.orderArr = [[], [], [], []];
            this.hasMoreArr = [true, true, true, true];

            // 登录时加载数据
            if (val) {
                this.getOrderList();
            }
        },
    },
    methods: {
        formatChargingTime,
        getSlotName(i) {
            return "tab" + i;
        },
        link(path) {
            uni.navigateTo({
                url: path,
            });
        },
        getOrderList() {
            if (this.loading) return false;
            this.loading = true;
            let curIndex = this.tabIndex;
            getOrderListAPI({
                orderCate: orderCateList[curIndex],
                page: this.pageArr[curIndex],
            })
                .then((res) => {
                    this.orderArr[curIndex] = this.orderArr[curIndex].concat(res.list);
                    this.hasMoreArr[curIndex] = res.total_page > this.pageArr[curIndex];
                    this.pageArr[curIndex]++;
                    this.loading = false;
                })
                .catch((err) => {
                    this.loading = false;
                });
        },
    },
};
</script>
<style scoped lang="less">
.container {
    height: 100vh;
    box-sizing: border-box;
    overflow: hidden;
    padding-bottom: 160rpx;
    background-color: #f6f6f6;

    .header {
        font-size: 38rpx;
        line-height: 1;
        font-weight: bold;
        margin-left: 28rpx;
        color: #333;
    }

    .title {
        width: 160rpx;
        height: 54rpx;
        margin-left: 28rpx;
        display: block;
    }

    .list {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 30rpx;

        .order-item {
            width: 694rpx;
            margin-bottom: 30rpx;
            box-sizing: border-box;
            padding: 0 30rpx;
            background-color: #ffffff;
            border-radius: 24rpx;

            .order-header {
                border-bottom: 2rpx solid #f3f3f3;
                height: 80rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .order-header-left {
                    display: flex;
                    align-items: center;
                    font-size: 26rpx;
                    color: #333;
                    font-weight: bold;
                    img {
                        width: 36rpx;
                        height: 36rpx;
                        margin-right: 12rpx;
                    }
                }
            }

            .order-item-content {
                padding-top: 20rpx;
                .order-item-row {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    height: 60rpx;
                    font-size: 26rpx;
                    line-height: 1;

                    .order-label {
                        color: #9a9a9a;
                    }

                    .order-value {
                        color: #333;
                    }
                }
            }

            .order-footer {
                height: 100rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .order-footer-right {
                    font-size: 26rpx;
                    line-height: 1;
                    color: #333;
                    span {
                        font-size: 32rpx;
                        line-height: 1;
                        color: #ff5e5e;
                        font-weight: bold;
                    }
                }
            }
        }
        .empty {
            font-size: 24rpx;
            line-height: 1;
            color: #999;
            margin-top: 100rpx;
        }
        .load-more {
            width: 100%;
            font-size: 24rpx;
            line-height: 1;
            color: #08bfa8;
            padding: 20rpx 0;
            text-align: center;
        }
        .no-more {
            width: 100%;
            font-size: 24rpx;
            line-height: 1;
            color: #ccc;
            padding: 20rpx 0 40rpx;
            text-align: center;
        }
    }
}
</style>
